<template>
  <div class="grid" id="app">

    <div class="grid-item">
      <loading-spinner-meteor
        size="70px"
        color="#009688"
        layer-color="#222"
      />
    </div>

    <div class="grid-item">
      <loading-spinner-track
        size="70px"
        color="#009688"
        stroke-width="4px"
        layer-color="#222"
        top
      />
    </div>

    <div class="grid-item">
      <loading-spinner-track
        size="70px"
        color="#009688"
        stroke-width="4px"
        layer-color="#222"
        top
        bottom
      />
    </div>

    <div class="grid-item">
      <loading-spinner-track
        size="70px"
        color="#009688"
        stroke-width="4px"
        layer-color="#222"
        top
        right
        bottom
      />
    </div>

    <div class="grid-item">
      <loading-spinner-track
        size="70px"
        color="#F6D110"
        stroke-width="36px"
        layer-color="#000"
        top
        bottom
      />
    </div>

    <div class="grid-item">
      <loading-spinner-track-async
        size="70px"
        color="#009688"
        stroke-width="4px"
        layer-color="#222"
      />
    </div>

    <div class="grid-item">
      <loading-dot
        size="20px"
        space="-5px"
        color="#009688"
      />
    </div>

    <div class="grid-item">
      <loading-dot
        size="20px"
        color="#009688"
      />
    </div>

    <div class="grid-item">
      <loading-dot
        size="20px"
        color="#009688"
        :round="false"
      />
    </div>

    <div class="grid-item">
      <loading-light-flow
        size="40px"
        angle="-50"
        style="animation-duration: 1.6s"
      />
    </div>

    <div class="grid-item">
      <loading-square-flip
        size="40px"
        color="#009688"
      />
    </div>

    <div class="grid-item">
      <loading-taichi
        size="90px"
        left-color="#FFF"
        right-color="#000"
      />
    </div>

    <div class="grid-item">
      <loading-heart
        size="90px"
        color="#F44336"
      />
    </div>

  </div>
</template>

<style>
.grid {
  min-height: 100vh;
  background-color: #263238;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.grid-item {
  width: 300px;
  min-width: 300px;
  height: 300px;
  flex-basis: calc(100% / 6);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
